<!--
Copyright (c) 2011 Shyc2001 (http://twitter.com/shyc2001)
This work is based on:
*"Switchy! Chrome Proxy Manager and Switcher" (by Mohammad Hejazi (mohammadhi at gmail d0t com))
*"SwitchyPlus" by @ayanamist (http://twitter.com/ayanamist)

    This file is part of SwitchySharp.
    SwitchySharp is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    SwitchySharp is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with SwitchySharp.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>SwitchySharp Options</title>
    <link rel="stylesheet" href="assets/styles/options.css" type="text/css"/>
    <link rel="stylesheet" href="assets/styles/infoTip.css" type="text/css"/>
    <link rel="stylesheet" href="assets/styles/helpToolTip.css" type="text/css"/>
    <script src="assets/libs/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="assets/libs/jquery.base64.js" type="text/javascript"></script>
    <script src="assets/libs/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <script src="assets/libs/FileSaver.js" type="text/javascript"></script>
    <script src="assets/scripts/options.js" type="text/javascript"></script>
    <script src="assets/scripts/infoTip.js" type="text/javascript"></script>
    <script src="assets/scripts/helpToolTip.js" type="text/javascript"></script>
</head>
<body data-i18n-values=".style.direction:global_direction;.style.textAlign:global_textAlign">
<table id="optionsTable">
<tr>
    <td>
        <div id="header">
            <table>
                <tr>
                    <td style="width:100%">
                        <img src="assets/images/icon-128.png" width="50" class="title" alt="SwitchySharp"/>
                        <span class="title" data-i18n-content="options_headerTitle">SwitchySharp Options</span>
                        <a id="showUpgradePopup" href="#upgradePopupBackdrop" style="float: right;">
                          <span data-i18n-content="options_upgrade">Upgrade</span>
                          <img src="assets/images/omega-64.png" title="Upgrade to SwitchyOmega" data-i18n-values="title:options_upgrade" />
                        </a>
                    </td>
                    <td>
                        <!--img src="assets/images/close.png" class="close" title="Close" onclick="closeWindow();" /-->
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>
<tr id="tabsRow">
    <td>
        <div id="tabsContainer">
            <div id="tabProfiles" class="selected">
                <img src="assets/images/profile.png" style="width:16px;vertical-align:bottom;height:16px;"
                     alt="profile"/>
                <span data-i18n-content="options_tabProxyProfiles">Proxy Profiles</span>
            </div>
            <div id="tabRules" class="normal">
                <img src="assets/images/filter.png" style="width:16px;vertical-align:bottom;height:16px;" alt="filter"/>
                <span data-i18n-content="options_tabSwitchRules">Switch Rules</span>
            </div>
            <div id="tabNetwork" class="normal">
                <img src="assets/images/network.png" style="width:16px;vertical-align:bottom;height:16px;"
                     alt="network"/>
                <span data-i18n-content="options_tabNetwork">Network</span>
            </div>
            <div id="tabGeneral" class="normal">
                <img src="assets/images/options.png" style="width:16px;vertical-align:bottom;height:16px;"
                     alt="options"/>
                <span data-i18n-content="options_tabGeneral">General</span>
            </div>
            <div id="tabImportExport" class="normal">
                <img src="assets/images/save.png" style="width:16px;vertical-align:bottom;height:16px;" alt="save"/>
                <span data-i18n-content="options_tabImportExport">Import/Export</span>
            </div>
        </div>
    </td>
</tr>
<tr style="height:100%">
<td style="vertical-align:top">
<div id="body">
<div id="tabProfilesBody" class="tab">
    <table id="proxyTable">
        <tr>
            <th data-i18n-content="options_proxyProfiles">Proxy Profiles</th>
            <td></td>
            <th data-i18n-content="options_profileDetails">Profile Details</th>
        </tr>
        <tr>
            <td style="width:28%">
                <table id="proxyProfiles">
                    <tr class="templateRow">
                        <td style="width:100%" data-i18n-content="options_untitledProfile">[Untitled Profile]</td>
                        <td style="width:28px">
                            <div class="color" title="Profile Color"
                                 data-i18n-values="title:options_profileColor">
                                <div></div>
                            </div>
                        </td>
                        <td style="width:30px">
                            <div class="delete row" title="Delete Profile"
                                 data-i18n-values="title:options_deleteProfile"></div>
                        </td>
                    </tr>
                </table>
                <button class="button" id="btn-new">
                    <img src="assets/images/add.png" alt="add"/>
                    <span data-i18n-content="options_newProfile">New Profile</span>
                </button>
            </td>
            <td style="width:13px"></td>
            <td>
                <table id="profileDetails">
                    <tr class="indent">
                        <td><label><b data-i18n-content="options_profileName">Profile Name</b></label></td>
                        <td colspan="3"><input id="profileName" type="text"/></td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <hr/>
                        </td>
                    </tr>
                    <tr class="section">
                        <td colspan="4">
                            <label>
                                <input id="modeManual" type="radio" name="proxyMode"/>
                                <span><b data-i18n-content="options_manualConfig">Manual Configuration</b></span>
                            </label>
                        </td>
                    </tr>
                    <tr id="httpRow" class="indent">
                        <td><label data-i18n-content="options_httpProxy">HTTP Proxy</label></td>
                        <td><input id="httpProxyHost" type="text" class="ltr"/></td>
                        <td><label data-i18n-content="options_proxyPort">Port</label></td>
                        <td><input id="httpProxyPort" type="text" class="ltr"/></td>
                    </tr>
                    <tr id="sameProxyRow" class="indent">
                        <td></td>
                        <td colspan="3">
                            <label>
                                <input id="useSameProxy" type="checkbox"/>
                                <span data-i18n-content="options_useSameProxy">Use the same proxy server for all protocols</span>
                            </label>
                        </td>
                    </tr>
                    <tr id="httpsRow" class="indent">
                        <td><label data-i18n-content="options_httpsProxy">HTTPS Proxy</label></td>
                        <td><input id="httpsProxyHost" type="text" class="ltr"/></td>
                        <td><label data-i18n-content="options_proxyPort">Port</label></td>
                        <td><input id="httpsProxyPort" type="text" class="ltr"/></td>
                    </tr>
                    <tr id="ftpRow" class="indent">
                        <td><label data-i18n-content="options_ftpProxy">FTP Proxy</label></td>
                        <td><input id="ftpProxyHost" type="text" class="ltr"/></td>
                        <td><label data-i18n-content="options_proxyPort">Port</label></td>
                        <td><input id="ftpProxyPort" type="text" class="ltr"/></td>
                    </tr>
                    <tr id="socksRow" class="indent">
                        <td><label data-i18n-content="options_socksHost">SOCKS Host</label></td>
                        <td><input id="socksProxyHost" type="text" class="ltr"/></td>
                        <td><label data-i18n-content="options_proxyPort">Port</label></td>
                        <td><input id="socksProxyPort" type="text" class="ltr"/></td>
                    </tr>
                    <tr id="socksVersionRow" class="indent">
                        <td></td>
                        <td colspan="3">
                            <table>
                                <tr>
                                    <td style="padding: 0 !important">
                                        <label>
                                            <input id="socksV4" type="radio" name="socksVersion"/>
                                            <span data-i18n-content="options_socks4">SOCKS v4</span>
                                        </label>
                                    </td>
                                    <td></td>
                                    <td>
                                        <label>
                                            <input id="socksV5" type="radio" name="socksVersion"/>
                                            <span data-i18n-content="options_socks5">SOCKS v5</span>
                                        </label>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr class="section">
                        <td colspan="4">
                            <label>
                                <input id="modeAuto" type="radio" name="proxyMode"/>
                                <span><b data-i18n-content="options_autoConfig">Automatic Configuration</b></span>
                            </label>
                        </td>
                    </tr>
                    <tr id="configUrlRow" class="indent">
                        <td><label data-i18n-content="options_autoConfigUrl">Auto Config URL</label></td>
                        <td colspan="3"><input id="proxyConfigUrl" type="text" class="ltr"/></td>
                    </tr>
                    <tr class="indent">
                        <td colspan="4">
                            <input type="file" id="pfile" name="pfile" style="visibility:hidden;position:absolute;"/>
                            <button class="button"
                                    data-i18n-content="options_importPAC" id="importPACButton">Import PAC File
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <hr/>
                        </td>
                    </tr>
                    <tr class="indent">
                        <td>
                            <label><b data-i18n-content="options_noProxyFor">No Proxy for</b></label>
                            <span data-help="noProxyFor"/>
                        </td>
                        <td colspan="3"><input id="proxyExceptions" type="text" class="ltr"/></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

<div id="tabRulesBody" class="tab">
    <label>
							<span class="title"><input id="chkSwitchRules" type="checkbox"/> 
								<span data-i18n-content="options_switchRulesEnable">Enable Switch Rules</span>
								<span data-help="switchRulesEnable"/>
							</span>
    </label>

    <div id="switchRules">
        <table id="rulesTable" class="rulesTable">
            <tr class="tableHeader">
                <th style="width:18%" data-i18n-content="options_ruleName">Rule Name</th>
                <th style="width:45%"><span data-i18n-content="options_urlPattern">URL Pattern</span>
                    <span data-help="urlPattern"/>
                </th>
                <th style="width:16%"><span data-i18n-content="options_patternType">Pattern Type</span>
                    <span data-help="patternType"/>
                </th>
                <th style="width:21%"><span data-i18n-content="options_proxyProfile">Proxy Profile</span>
                    <span data-help="proxyProfile"/>
                </th>
                <th style="width:28px"></th>
            </tr>
            <tr class="templateRow">
                <td>
                    <div title="Click to edit" data-i18n-values="title:options_clickToEdit"><span class="ruleName"
                                                                                                  data-i18n-content="options_newRule">New Rule</span>
                        <input name="name" type="text"/></div>
                </td>
                <td class="ltr">
                    <div title="Click to edit">
                        <span class="urlPattern ltr">-</span>
                        <input name="urlPattern" type="text"/>
                        <!--b class="tag">RegEx</b--></div>
                </td>
                <td>
                    <div>
                        <select name="patternType">
                            <option value="wildcard" data-i18n-content="options_patternTypeWildcard">Wildcard</option>
                            <option value="regexp" data-i18n-content="options_patternTypeRegExp">RegExp</option>
                        </select></div>
                </td>
                <td>
                    <div>
                        <select name="profileId"></select></div>
                </td>
                <td>
                    <div class="delete rule" title="Delete Rule"
                         data-i18n-values="title:options_deleteRule"></div>
                </td>
            </tr>
            <tr class="defaultRow">
                <td>
                    <div>
                        <span class="ruleName" data-i18n-content="options_defaultRule">Default Rule</span>
                        <span data-help="defaultRule"/>
                    </div>
                </td>
                <td colspan="2">
                    <div><span class="urlPattern" data-i18n-content="options_defaultRuleUrlPattern">All URLs that doesn't match any other pattern</span>
                    </div>
                </td>
                <td>
                    <div>
                        <select id="cmbDefaultRuleProfile" name="profileId"></select></div>
                </td>
                <td><img src="assets/images/filter.png" alt="Apply profile to all rules" id="apply2All"/></td>
            </tr>
        </table>
        <button class="button" id="btnNewRule">
            <img src="assets/images/add.png" alt="add"/>
            <span data-i18n-content="options_newRule">New Rule</span>
        </button>
        <hr/>

        <label>
							<span class="title">
								<input id="chkRuleList" type="checkbox"/> 
								<span data-i18n-content="options_ruleList">Online Rule List</span>
								<span data-help="ruleList"></span>
							</span>
            <a href="http://code.google.com/p/switchy/wiki/RuleList" class="link" target="_blank"
               data-i18n-values=".style.float:global_float;" style="font-size:small;font-style:italic;"
               data-i18n-content="options_moreInfo">
                (More Info)
            </a>
        </label>
        <table id="ruleListsTable" class="rulesTable">
            <tr class="tableHeader">
                <th style="width:60%"><span data-i18n-content="options_ruleListUrl">Rule List URL</span>
                    <span data-help="ruleListUrl"/>
                </th>
                <th style="width:20%"><span data-i18n-content="options_reloadEvery">Reload Every</span>
                    <span data-help="reloadEvery"/>
                </th>
                <th style="width:20%"><span data-i18n-content="options_proxyProfile">Proxy Profile</span>
                    <span data-help="proxyProfileRule"/>
                </th>
            </tr>
            <tr class="tableRow">
                <td><input id="txtRuleListUrl" type="text" class="ltr"/></td>
                <td>
                    <select id="cmbRuleListReload">
                        <option value="15" data-i18n-content="options_15Minutes">15 Minutes</option>
                        <option value="30" data-i18n-content="options_30Minutes">30 Minutes</option>
                        <option value="45" data-i18n-content="options_45Minutes">45 Minutes</option>
                        <option value="60" data-i18n-content="options_1Hour">1 Hour</option>
                        <option value="180" data-i18n-content="options_3Hours">3 Hours</option>
                        <option value="360" data-i18n-content="options_6Hours">6 Hours</option>
                        <option value="720" data-i18n-content="options_12Hours">12 Hours</option>
                        <option value="1440" data-i18n-content="options_everyday">Everyday</option>
                    </select>
                </td>
                <td>
                    <select id="cmbRuleListProfile">
                        <option value="">Direct</option>
                    </select>
                </td>
            </tr>
        </table>
        <label id="autoProxy">
            <input id="chkAutoProxy" type="checkbox"/>
            <span data-i18n-content="options_autoProxyCompatible">AutoProxy Compatible List</span>
            <span data-help="autoProxyCompatible"/>
        </label>

        <div style="text-align:right;">
            <span data-i18n-content="options_lastSuccessfulUpdate">Last successful update: </span><span
                id="lastListUpdate"></span>
            <img src="assets/images/loading.gif" style="width:16px;height:16px;visibility:hidden;" alt="Loading"
                 id="updatingListIcon"/>
            <button class="button" id="updateListNow" data-i18n-content="options_updateListNow">Update List
                Now
            </button>
        </div>
    </div>
</div>

<div id="tabNetworkBody" class="tab">
    <p>
        <label>
								<span class="title"><input id="chkMonitorProxyChanges" type="checkbox"/> 
									<span data-i18n-content="options_monitorProxyChanges">Monitor Proxy Changes</span>
									<span data-help="monitorProxyChanges"/>
								</span>
        </label>
    </p>

    <p>
        <label>
								<span class="indent"><input id="chkPreventProxyChanges" type="checkbox"/> 
									<span data-i18n-content="options_revertProxyChanges">Revert proxy changes done by other apps.</span>
									<span data-help="revertProxyChanges"/>

								</span>
        </label>
    </p>
</div>

<div id="tabImportExportBody" class="tab">
    <div class="title" data-i18n-content="options_switchRules">Switch Rules</div>
    <table class="optionGroup">
        <tr class="section">
            <td>
                <button class="button" id="exportPacFile" data-i18n-content="options_exportPacFile">Export PAC
                    File
                </button>
            </td>
            <td data-i18n-content="options_exportPacFile_help">
                Export Switch Rules as a PAC file, so you can use it in other browsers.
            </td>
        </tr>
        <tr class="section">
            <td>
                <button class="button" id="exportRuleList" data-i18n-content="options_exportRuleList">Export
                    Rule List
                </button>
            </td>
            <td data-i18n-content="options_exportRuleList_help">
                Export Switch Rules as a SwitchySharp Rule List file, so you can share it with friends.
            </td>
        </tr>
    </table>
    <hr/>
    <div class="title" data-i18n-content="options_headerTitle">SwitchySharp Options</div>
    <table id="exportRulesTable" class="optionGroup">
        <tr class="section">
            <td>
                <button class="button" id="makeBackup" data-i18n-content="options_makeBackup">Make Backup
                </button>
            </td>
            <td data-i18n-content="options_makeBackup_help">
                Make a full backup of your SwitchySharp options (including proxies, rules and all other options).
            </td>
        </tr>
        <tr class="section">
            <td>
                <input type="file" id="rfile" name="rfile" style="visibility:hidden;position:absolute;"/>
                <button class="button" id="RestoreFileButton" data-i18n-content="options_restoreLocal">
                    Restore from File
                </button>
            </td>
            <td data-i18n-content="options_restoreLocal_help">
                Restore your SwitchySharp options from a local file.
            </td>
        </tr>
        <tr class="section">
            <td>
                <button class="button" id="restoreBackup" data-i18n-content="options_restoreBackup">Restore from
                    Online
                </button>
            </td>
            <td>
                <input type="text" id="txtBackupFilePath" class="initial ltr"
                       value="Backup file URL (e.g. 'http://example.com/switchy.bak')"
                       data-i18n-values="value:options_restoreBackup_help"/>
            </td>
        </tr>
    </table>
</div>

<div id="tabGeneralBody" class="tab">
    <label>
							<span class="title"><input id="chkQuickSwitch" type="checkbox"/> 
								<span data-i18n-content="options_quickSwitch">Quick Switch</span>
								<span data-help="quickSwitch"/>
							</span>
    </label>

    <div id="quickSwitchDiv" class="indent">
        <p>
            <label class="title" data-i18n-content="options_cycledProfiles">Cycled Profiles (drag to sort):</label>
        </p>

        <p data-i18n-content="options_quickSwitch_cycle_help">When you click on the icon, SwitchySharp will apply the
            following profiles in their order.</p>
        <ul id="cycleEnabled" class="indent"></ul>
        <p class="title" data-i18n-content="options_notCycledProfiles">Not cycled Profiles (drag to the above box to
            enable):</p>
        <ul id="cycleDisabled" class="indent"></ul>
    </div>

    <hr/>

    <div class="title">
        <span data-i18n-content="options_startupProfile">Startup Profile:</span>
        <span data-help="startupProfile"/>
    </div>
    <p>
        <select id="cmbStartupProfile"></select>
    </p>

    <hr/>

    <div class="title" data-i18n-content="options_miscOptions">Misc Options</div>
    <p>
        <label>
								<span class="indent"><input id="chkConfirmDeletion" type="checkbox"/> 
									<span data-i18n-content="options_confirmDeletion">Confirm profile/rule deletion.</span>
									<span data-help="confirmDeletion"/>
								</span>
        </label>
    </p>

    <p>
        <label>
								<span class="indent"><input id="chkRefreshTab" type="checkbox"/> 
									<span data-i18n-content="options_RefreshTab">Refresh current tab on profile change</span>
									<span data-help="refreshTab"/>
								</span>
        </label>
    </p>
</div>

<div class="control">
    <hr/>
    <table>
        <tr>
            <td style="width:100%">
                <button class="button" id="resetOptions"
                        data-i18n-content="options_resetOptions">Reset Options
                </button>
            </td>
            <td>
                <button class="button bold" id="saveOptions" data-i18n-content="options_save">
                    Save
                </button>
            </td>
            <td></td>
            <td>
                <button class="button" id="closeWindow" data-i18n-content="options_close">Close
                </button>
            </td>
        </tr>
    </table>
</div>
</div>
</td>
</tr>
</table>
<div id="helpToolTips">

    <div class="help" id="help_noProxyFor">
        <p data-i18n-content="options_noProxyFor_help">Use semicolons ( ; ) to seperate entries.</p>
    </div>
    <div class="help" id="help_switchRulesEnable" data-i18n-content="options_switchRulesEnable_help">
        <p>Switch Rules specify which proxy should be used for each URL.</p>
        <hr/>
        <p>When this option is enabled you'll see two more items in main menu:</p>
        <table>
            <tr>
                <td><i>Auto Switch Mode</i></td>
                <td>clicking this item will activate Switch Rules.</td>
            </tr>
            <tr>
                <td><i>New Rule</i></td>
                <td>quickly add a new Switch Rule for the current website.</td>
            </tr>
        </table>
    </div>
    <div id="help_proxyProfile" class="help">
        <p data-i18n-content="options_proxyProfile_help">The proxy profile to be applied when this rule is matched.</p>
    </div>
    <div class="help" id="help_defaultRule" data-i18n-content="options_defaultRule_help">
        <p>This rule will be applied if no other rule is matched.</p>

        <p><b>Note:</b> This rule can't be deleted.</p>
    </div>
    <div class="help" id="help_urlPattern" data-i18n-content="options_urlPattern_help">
        <p>Pattern of the page url.</p>
        <hr/>
        <table>
            <tr>
                <td colspan="2"><b>Wildcard Reference</b></td>
            </tr>
            <tr>
                <td><i>The asterisk (*) </i></td>
                <td>matches zero or more characters.</td>
            </tr>
            <tr>
                <td><i>The question mark (?) </i></td>
                <td>matches exactly one character.</td>
            </tr>
            <tr>
                <td colspan="2"><br/><b>Examples</b></td>
            </tr>
            <tr>
                <td><i>*://www.google.com/* </i></td>
                <td>Matches any URL that is on 'www.google.com' host and uses any scheme (http, https ...).</td>
            </tr>
            <tr>
                <td><i>https://*.google.com/foo*bar </i></td>
                <td>Matches any URL that is on a 'google.com' host and uses the https scheme (such as 'www.google.com',
                    'docs.google.com', or 'google.com'), as long as the path starts with '/foo' and ends with 'bar'.
                </td>
            </tr>
            <tr>
                <td><i>http://example.org/foo/bar.html </i></td>
                <td>Matches exactly the specified URL.</td>
            </tr>
        </table>
    </div>
    <div class="help" id="help_patternType" data-i18n-content="options_patternType_help">
        <p>The type of URL Pattern.</p>
        <hr/>
        <table>
            <tr>
                <td><i>Wildcard</i></td>
                <td>for Wildcard matching.</td>
            </tr>
            <tr>
                <td><i>RegExp</i></td>
                <td>for Regular Expression matching.</td>
            </tr>
        </table>
    </div>
    <div class="help" id="help_ruleList">
        <p data-i18n-content="options_ruleList_help">Import predefined Switch Rules from online repository.</p>
    </div>
    <div class="help" id="help_ruleListUrl">
        <p data-i18n-content="options_ruleListUrl_help">The location of Rule List (you can't use local files).</p>
    </div>
    <div class="help" id="help_reloadEvery">
        <p data-i18n-content="options_reloadEvery_help">Auto reload the Rule List every...</p>
    </div>
    <div class="help" id="help_proxyProfileRule">
        <p data-i18n-content="options_ruleListProxyProfile_help">The proxy profile to be applied when any rule of this
            list is matched.</p>
    </div>

    <div class="help" id="help_autoProxyCompatible">
        <p data-i18n-content="options_autoProxyCompatible_help">Check this option if the url points to an AutoProxy rule
            list (like 'gfwlist').</p>
    </div>
    <div class="help" id="help_monitorProxyChanges">
        <p data-i18n-content="options_monitorProxyChanges_help">Repeatedly check for changes in proxy settings done by
            other applications, and update SwitchyPlus icon to reflect those changes.</p>
    </div>
    <div class="help" id="help_revertProxyChanges">
        <p data-i18n-content="options_revertProxyChanges_help">Revert any change in proxy settings done by other
            applications.</p>
    </div>
    <div class="help" id="help_quickSwitch" data-i18n-content="options_quickSwitch_help">
        <p>Allows you to switch among proxy profiles in one click (by clicking on SwitchySharp icon). When you click on
            the icon, SwitchySharp will apply the following profiles in their order.</p>
        <hr/>
        <p><b>Note:</b> After enabling this feature you won't be able to see SwitchySharp main menu when clicking on
            SwitchySharp icon. To open Option page again, right-click on the icon and then click "Options".</p>
    </div>
    <div class="help" id="help_confirmDeletion">
        <p data-i18n-content="options_confirmDeletion_help">Show a confirmation dialog for deletion of proxy profiles or
            switch rules.</p>
    </div>
    <div class="help" id="help_refreshTab">
        <p data-i18n-content="options_refreshTab_help">Refresh the current tab when changing profile via popup menu or
            quick switch.</p>
    </div>
    <div class="help" id="help_startupProfile">
        <p data-i18n-content="options_startupProfile_help">The profile to be applied on extension startup.</p>
    </div>
</div>
<div id="upgradePopupBackdrop" style="display: none;">
  <div id="upgradePopup" style="display: block; height: auto">
      <h2 class="header title">
          <img src="assets/images/info.png" style="height: 1em; vertical-align: middle; margin-right: 5px;"/>
          <span data-i18n-content="options_upgradeTitle"></span>
      </h2>
      <div class="header light" style="margin-bottom: 0">
          <div style="float:left; margin-right: 10px; cursor: pointer; height: 100%;">
              <img src="assets/images/omega-64.png" title="SwitchyOmega" />
          </div>
          <div style="white-space: normal; overflow: hidden;" data-i18n-content="options_upgradeContent"></div>
          <div class="control" style="padding-top: 10px; text-align: right;">
            <a class="button bold" href="https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif" id="btnUpgrade" data-i18n-content="options_upgrade" data-i18n-values="href:options_upgradeLink">Upgrade</a>
            <button class="button" id="btnCancel" data-i18n-content="popup_cancel">Cancel</button>
          </div>
      </div>
  </div>
</div>
</body>
</html>
